import Vue from "vue";
import VueRouter from "vue-router";
import Login from "./pages/Login";
import Registe from "./pages/Registe";
import Home from "./pages/Home";
import NotFoundComponent from "./pages/NotFoundComponent";
import Welcome from "./pages/Welcome";
import test_page from "./pages/test_page.vue";
import Apply from "./pages/Apply";
import Change_info from "./pages/ChangeInfo";
import Remaining from "./pages/Remaining";
import Approve from "./pages/Approve";
import Staff from "./pages/Staff";
import Report from "./pages/Report";
import Recod from "./pages/Recod";

Vue.use(VueRouter);
export default new VueRouter({
  mode: "history", //默认hash模式（url比较丑）,采用history模式
  routes: [
    { path: "/", component: Login },
	{ path: "/register", component: Registe },
    {
      path: "/home",
      component: Home,
      children: [
        {
          path: "",
          component: Welcome, //不使用路由传参数
        },
        {
          path: "1",
          component: test_page,
          props: { name: "使用静态参数" }, //使用路由静态参数
        },
        {
          path: "2/:name",
          component: Welcome,
          props: true, //使用路由动态传递参数
        },
		{
          path: "5/请假申请",
          component: Apply,
          props: true, //使用路由动态传递参数
        },
		{
          path: "6/假期余额",
          component: Remaining,
          props: true, //使用路由动态传递参数
        },
        {
          path: "7/请假审批",
          component: Approve,
          props: true, //使用路由动态传递参数
        },
        {
          path: "8/每月报表",
          component: Report,
          props: true, //使用路由动态传递参数
        },
        {
          path: "9/员工信息",
          component: Staff,
          props: true, //使用路由动态传递参数
        },
		{
          path: "10/请假记录",
          component: Recod,
          props: true, //使用路由动态传递参数
        },
		{
          path: "1/change_info",
          component: Change_info,
          props: true, //使用路由动态传递参数
        },
        {
          path: "3/:name",
          component: Welcome,
          props: (route) => {
            //使用路由动态态值与基于路由的值结合传递参数
            const now = new Date();
            return {
              name: `动态态值与基于路由的值结合,--${
                route.params.name
              }--${now.getSeconds()}秒`,
            };
          },
        },
      ],
    },
    { path: "*", component: NotFoundComponent }, //页面404
  ],
});